import React, { useRef, useEffect, useState } from 'react';
import { ColumnStyled } from './style';
import * as echarts from 'echarts';

type ColumnPropsType = {
  data: any;
};

const Column: React.FC<ColumnPropsType> = (props) => {
  const chartRef = useRef(null);
  const [data1, setData1] = useState();
  const [data2, setData2] = useState();
  useEffect(() => {
    if (props.data) {
      let columnData1 = props.data.map((item: any) => item.lastYearNum);
      let columnData2 = props.data.map((item: any) => item.thisYearNum);
      setData1(columnData1);
      setData2(columnData2);
    }
  }, [props.data]);
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['去年', '今年'],
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      show: true,
      feature: {
        // dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        // restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        // axisTick: {
        //   alignWithLabel: true,
        // },
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '去年',
        type: 'bar',
        data: data1,
      },
      {
        name: '今年',
        type: 'bar',
        data: data2,
      },
    ],
  };
  // let option = {
  //   tooltip: {
  //     trigger: 'axis',
  //     axisPointer: {
  //       type: 'shadow',
  //     },
  //     formatter: function (param: any) {
  //       console.log(param);
  //       return `${param[0].name}<br/><strong>${param[0].value}</<strong>`;
  //     },
  //   },
  //   legend: {
  //     data: ['去年', '今年'],
  //   },
  //   grid: {
  //     left: '3%',
  //     right: '4%',
  //     bottom: '3%',
  //     containLabel: true,
  //   },
  //   xAxis: [
  //     {
  //       type: 'category',
  //       data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  //       axisTick: {
  //         alignWithLabel: true,
  //       },
  //     },
  //   ],
  //   yAxis: [
  //     {
  //       type: 'value',
  //       splitLine: {
  //         show: false,
  //       },
  //     },
  //   ],
  //   series: [
  //     {
  //       name: '去年',
  //       type: 'bar',
  //       barWidth: '60%',
  //       data: data1,
  //     },
  //     {
  //       name: '今年',
  //       type: 'bar',
  //       barWidth: '60%',
  //       data: data2,
  //     },
  //   ],
  //   color: '#00ffff',
  // };

  useEffect(() => {
    let chart: any = null;
    if (chartRef.current) {
      // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
      chart = echarts.init(chartRef.current);
      // 设置图表实例的配置项和数据
      option && chart.setOption(option);
    }

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例。实例销毁后无法再被使用
      chart.dispose();
    };
  }, [data1, data2]);
  return (
    <ColumnStyled>
      <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    </ColumnStyled>
  );
};

export default Column;
